document.observe("dom:loaded", function(e) {    
 
    new Ajax.Request('/app/cars', {
        method:'GET',
        onSuccess: function(transport){
            var json = transport.responseText.evalJSON();
            var jdata = '<table>';
            jdata += '<tr><th>car</th><th>make</th><th>model</th><th>year</th></tr>';
            for (var j = 0; j < json.length; j++) {
                jdata += '<tr><td>' + json[j].carname + "</td><td>" + json[j].make  + "</td><td>" + json[j].model   + "</td><td>" + json[j].year   + "</td></tr>";
            }
            jdata += '</table>';
            $('list-cars').update(jdata);
        },
        onFailure: function(transport){
            $('list-cars').update('Can not get data from server!');
        }
    });
 
    new Ajax.Request('/app/cars/gas', {
        method:'GET',
        onSuccess: function(transport){
            var json = transport.responseText.evalJSON();
            var jdata = '<table>';
            jdata += "<tr><th>vendor</th><th>bill</th><th>odometer</th><th>date and time</th><th>miles traveled</th></tr>";
            for (var j = 0; j < json.length; j++) {
                jdata += "<tr><td>" + json[j].vendor + "</td><td>" + json[j].bill + "</td><td>" +json[j].odometer + "</td><td>" +json[j].ts + json[j].milesTraveled + "</td><tr>";
            }
            jdata += "</table>";
            $('list-gas-purchases').update(jdata);
        },
        onFailure: function(transport){
            $('list-gas-purchases').update('Can not get data from server!');
        }
    });

    new Ajax.Request('/app/vendors', {
        method:'GET',
        onSuccess: function(transport){
            var json = transport.responseText.evalJSON();
            var jdata = '<table>';
            jdata += "<tr><th>vendor</th><th>address</th><th>city</th><th>state</th></tr>";
            for (var j = 0; j < json.length; j++) {
                jdata += "<tr><td>" + json[j].vendorname + "</td><td>" + json[j].address + "</td><td>" + json[j].city + "</td><td>" + json[j].state + '</td></tr>';
            }
            jdata += "</table>";
            $('list-vendors').update(jdata);
        },
        onFailure: function(transport){
            $('list-vendors').update('Can not get data from server!');
        }
    });

});
